<template>
  <div class="player" v-show="playList.length>0">
      <transition name="normal"
                    @enter="enter"
                    @after-enter="afterEnter"
                    @leave="leave"
                    @after-leave="afterLeave">
        <div class="normal-player" v-show="fullScreen">
            <div class="background">
                <img width="100%" height="100%" :src="currentSong.image" alt="">
            </div>
            <div class="top">
                <div class="back" @click="back">
                    <i class="icon-back"></i>
                    
                </div>
                <h1 class="title" v-html="currentSong.name"></h1>
                <h2 class="subtitle" v-html="currentSong.singer"></h2>
            </div>
            <div class="middle">
                <div class="middle-l">
                    <div class="cd-wrapper" ref="cdWrapper">
                            <div class="cd" :class="cdCls">
                                <img :src="currentSong.image" alt="" class="image">
                            </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="operators">
                    <div class="icon i-left">
                        <i class="icon-sequence"></i>
                    </div>
                    <div class="icon i-left">
                        <i class="icon-prev" @click="prev"></i>
                    </div>
                    <div class="icon i-center">
                        <i class="needsclick" :class="playIcon" @click="togglePlaying"></i>
                    </div>
                    <div class="icon i-right">
                        <i class="icon-next" @click="next"></i>
                    </div>
                    <div class="icon i-right">
                        <i class="icon icon-not-favorite"></i>
                    </div>
                </div>
            </div>
        </div>
      </transition>
      <transition name="mini">
        <div class="mini-player" v-show="!fullScreen" @click="open">
            <div class="icon">
                <div class="imgWrapper" :class="cdCls">
                    <img width="40" height="40" :src="currentSong.image" alt="">
                </div>
            </div>
            <div class="text">
                <h2 class="name" v-html="currentSong.name"></h2>
                <p class="desc" v-html="currentSong.singer"></p>
            </div>
            <div class="control">
                <div class="progress-circle">
                <i @click.stop="togglePlaying" class="icon-mini" :class="miniIcon"></i>
                </div>
            </div>
            <div class="control">
                <i class="icon-playlist"></i>      
            </div>
        </div>
      </transition>
      <audio ref="audio" :src="`https://api.bzqll.com/music/tencent/url?key=579621905&id=${currentSong.mid}&br=320`" @canplay="ready"></audio>
  </div>
</template>

<script>
import {mapState, mapGetters, mapMutations} from 'vuex'
import animations from 'create-keyframe-animation'
import {prefixStyle} from '../utils/dom'
import {getLyric} from '../api/song'


const transform = prefixStyle('transform');

export default {
  name: 'Player',

  data() {
      return {
          canplay: false
      }
  },

  computed: {
      ...mapState([
          'fullScreen',
          'playList',
          'playing',
          'currentIndex'
      ]),

      ...mapGetters([
          'currentSong'
      ]),

      playIcon() {
        return this.playing ? 'icon-pause' : 'icon-play'
      },

      miniIcon() {
        return this.playing ? 'icon-pause-mini' : 'icon-play-mini'
      },

      cdCls() {
          return this.playing == 1 ? 'play' : this.playing == 0 ? 'play pause' : ''
      }
  },

  watch: {
      currentSong() {
          this.$nextTick(()=> {
            //   console.log('播放')
            //   getLyric(this.currentSong.mid).then(res=> {
            //       console.log(res)
            //   })
            // console.log('tss')
              this.$refs.audio.play()
          })            
      },

      playing(newPlaying) {
          const audio = this.$refs.audio;
        //   console.log(audio)
          this.$nextTick(()=> {
              newPlaying ? audio.play() : audio.pause()
          })
          
      }
  },

  methods: {
      back() {
          this.$store.commit('setFullScreen', false)
      },

      open() {
          this.$store.commit('setFullScreen', true)
      },

      enter(el, done) {
        const { x, y, scale } = this._getPosAndScale();
        let animation = {
            0: {
                transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`
            },

            60: {
                transform: `translate3d(0, 0, 0) scale(1.1)`
            },

            100: {
                transform: `translate3d(0, 0, 0) scale(1)`
            }
        }    
        
        animations.registerAnimation({
            name: 'move',
            animation,
            presets: {
                duration: 400,
                easing: 'linear'
            }
        })

        animations.runAnimation(this.$refs.cdWrapper, 'move', done)
      },

      afterEnter() {
          animations.unregisterAnimation('move');
          this.$refs.cdWrapper.style.animation = '';
      },

      leave(el, done) {
          const { x, y, scale } = this._getPosAndScale();
          this.$refs.cdWrapper.style.transition = 'all 0.4s';
          this.$refs.cdWrapper.style[transform] = `translate3d(${x}px, ${y}px, 0) scale(${scale})`;
          this.$refs.cdWrapper.addEventListener('transitionend', done);
      },

      afterLeave() {
          this.$refs.cdWrapper.style.transition = '';
          this.$refs.cdWrapper.style[transform] = '';
      },

      //获取大圆动画的初始位置和大小
      _getPosAndScale() {
          const targetWidth = 40;
          const paddingLeft = 40;
          const paddingTop = 80;
          const paddingBottom = 30;
          const width = window.innerWidth*0.8;
          const scale = targetWidth/width;
          const x = -(window.innerWidth/2 - paddingLeft);
          const y = window.innerHeight - paddingTop - paddingBottom - width/2;
          return {
              x,
              y,
              scale
          }
      },

      ...mapMutations([
          'setPlayStatus',
          'setCurrentIndex'
      ]),

      togglePlaying() {
          this.setPlayStatus(!this.playing)
      },

      next() {
        if(!this.canplay) {
            return;
        }
        let index = this.currentIndex + 1;
        if(index === this.playList.length) {
            index = 0;                  
        }
        this.setCurrentIndex(index);
        this.setPlayStatus(-1);
        setTimeout(() => {
            this.setPlayStatus(1);
            this.canplay = false;      
        }, 20);
          
          
      },

      prev() {
        if(!this.canplay) {
            return;
        }
        let index = this.currentIndex - 1;
        if(index === -1) {
            index = this.playList.length - 1;                  
        }
        this.setCurrentIndex(index);
        this.setPlayStatus(-1);
        setTimeout(() => {
            this.setPlayStatus(1);
            this.canplay = false;      
        }, 20);
          
      },

      ready() {
          this.canplay = true;
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.player {
    .normal-player {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 150;
        background: #222;

        .background {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: .6;
            -webkit-filter: blur(20px);
            filter: blur(20px);
        }

        .top {
            position: relative;
            margin-bottom: 25px;

            .back {
                position: absolute;
                top: 0;
                left: 6px;
                z-index: 50;

                .icon-back {
                    display: block;
                    padding: 9px;
                    font-size: 22px;
                    color: #ffcd32;
                    -webkit-transform: rotate(-90deg);
                    transform: rotate(-90deg);
                }
            }

            .title {
                width: 70%;
                margin: 0 auto;
                line-height: 40px;
                text-align: center;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                font-size: 18px;
                color: #fff;
            }

            .subtitle {
                line-height: 20px;
                text-align: center;
                font-size: 14px;
                color: #fff;
            }
        }

        .middle {
            position: fixed;
            width: 100%;
            top: 80px;
            bottom: 170px;
            white-space: nowrap;
            font-size: 0;

            .middle-l {
                display: inline-block;
                vertical-align: top;
                position: relative;
                width: 100%;
                height: 0;
                padding-top: 80%;

                .cd-wrapper {
                    position: absolute;
                    left: 10%;
                    top: 0;
                    width: 80%;
                    box-sizing: border-box;
                    height: 100%;

                    .cd {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;

                        .image {
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            box-sizing: border-box;
                            border-radius: 50%;
                            border: 10px solid hsla(0,0%,100%,.1);
                        }

                        
                    }
                    .cd.play {
                        animation: rotate 20s linear infinite
                    }
                    .cd.pause {
                        animation-play-state: paused
                    }
                }
            }
        }

        .bottom {
            position: absolute;
            bottom: 50px;
            width: 100%;

            .operators {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;

                .icon {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    color: #ffcd32;

                    i {
                        font-size: 30px;
                    }
                }

                .i-left {
                    text-align: right;
                }

                .i-right {
                    text-align: left;
                }

                .i-center {
                    padding: 0 20px;
                    text-align: center;

                    i {
                        font-size: 40px;
                    }
                }
            }
        }
    }

    .normal-enter-active, .normal-leave-active {
        transition: all .4s;

        .top, .bottom {
            transition: all .4s cubic-bezier(0.86, 0.18, 0.82, 1.32);
        }
    }

    .normal-enter, .normal-leave-to {
        opacity: 0;

        .top {
            transform: translate3d(0, -100px, 0);
        }  

        .bottom {
            transform: translate3d(0, 100px, 0);
        }  
    }

    .mini-player {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 180;
        width: 100%;
        height: 60px;
        background: #333;

        .icon {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 40px;
            flex: 0 0 40px;
            width: 40px;
            height: 40px;
            padding: 0 10px 0 20px;

            .imgWrapper {
                height: 100%;
                width: 100%;

                img {
                    border-radius: 50%;
                }

            }

            .imgWrapper.play {
                animation: rotate 20s linear infinite
            }

            .imgWrapper.pause {
                animation-play-state: paused
            }
        }

        .text {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            line-height: 20px;
            overflow: hidden;

            .name {
                margin-bottom: 2px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                font-size: 14px;
                color: #fff;
            }

            .desc {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                font-size: 12px;
                color: hsla(0,0%,100%,.3);
            }
        }

        .control {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 30px;
            flex: 0 0 30px;
            width: 30px;
            padding: 0 10px;

            .progress-circle {
                position: relative;
            }

            .icon-mini {
                font-size: 32px;
                // position: absolute;
                left: 0;
                top: 0;
                color: rgba(255,205,49,.5);
            }

            .icon-playlist {
                font-size: 30px;
                color: rgba(255,205,49,.5);
            }
        }
    }

    .mini-enter-active, .mini-leave-active {
        transition: all .4s;
    }

    .mini-enter, .mini-leave-to {
        opacity: 0; 
    }
}

@keyframes rotate
    0%
      transform: rotate(0)
    100%
      transform: rotate(360deg)
</style>
